<template>
  <!-- 使用echars 第一步创建dom 容器 -->
  <div class="trend-chart-container" ref="echartstTaget"></div>
</template>

<script setup >
//  2. 导入echars模块
import * as echarts from "echarts";
import { onMounted, ref, defineProps } from "vue";
import { useI18n } from "vue-i18n";
import { watchSwitchLang } from "@/utils/i18n";

const i18n = useI18n()

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

// 3. 利用 echarts.init(target(对应的dom元素,这个target可以给上面的元素指定ref绑定就可)) .获取到myChart的实例
const echartstTaget = ref(null);
let myChart;
onMounted(() => {
  myChart = echarts.init(echartstTaget.value);
  //执行renderChart函数
  renderChart();
});

//渲染图标
const renderChart = () => {
  //4. 在这个函数中构建echarts需要的options对象(echarts 渲染的核心)
  const options = {
    // 鼠标移入之后的提示框配置
    tooltip: {
      // 鼠标移入到坐标轴时，触发提示框
      trigger: "axis",
      // 移入坐标轴时，提示框的配置项
      axisPointer: {
        // 显示十字准星指示器
        type: "cross",
        // 指示器样式
        crossStyle: {
          // 色值
          color: "#999",
        },
      },
    },
    // echarts 网格绘制的位置，对应 上、右、下、左
    grid: {
      top: 20,
      right: 0,
      bottom: 0,
      left: 0,
      // 计算边距时，包含标签
      containLabel: true,
    },

    // //图标的标题配置
    // title: {
    //   //标题文本
    //   text: "Echarts 入门示例",
    // },
    // 图例配置
    legend: {
      // 图例数据
      data: [i18n.t('msg.chart.monthIncome'), i18n.t('msg.chart.dayIncome')],
      // 图例位置
      right: 0,
    },
    // X 轴配置
    xAxis: {
      // 坐标轴类型，category：类目轴
      type: 'category',
      // 坐标轴数据
      data: props.data.monthAmountList.map(item => item.time),
      // 刻度尺配置
      axisTick: {
        // 不显示坐标轴刻度
        show: false
      }
    },
    // y 轴配置
    yAxis: {
      // Y 轴类型，value：数值轴
      type: 'value',
      // 最小值
      min: 0,
      // 最大值 可以是函数也可以像最小值一样写死
      max: function(value) {
        // 取整
        return parseInt(value.max * 1.2)
      },
      // 刻度上展示的文字 就是左侧展示的文字
      axisLabel: {
        formatter: `${i18n.t('msg.chart.unit')}`
      }
    },
    // 图表类型
    series: [
      // 第一个图表
      {
        // 图表名字，对应 legend.data[0]
        name: i18n.t('msg.chart.monthIncome'),
        // 图表类型
        type: 'bar',
        // 柱的宽度
        barWidth: 30,
        // 提示框展示配置
        tooltip: {
          // 提示框展示的内容
          valueFormatter: function(value) {
            return value + i18n.t('msg.chart.monthIncome')
          }
        },
        // 数据源
        data: props.data.monthAmountList.map(item => item.amount)
      },
      // 第二个图表
      {
        // 图表名字，对应 legend.data[1]
        name: i18n.t('msg.chart.dayIncome'),
        // 图表类型
        type: 'line',
        // 颜色
        color: '#6EC6D0',
        // 平滑
        smooth: true,
        // 提示框展示配置
        tooltip: {
          // 提示框展示的内容
          valueFormatter: function(value) {
            return value + i18n.t('msg.chart.monthIncome')
          }
        },
        // 数据源
        data: props.data.dailyCurve.map(item => item.amount)
      }
    ]
  };

  // 5. 利用 mChart.setOption 方法配置options
  myChart.setOption(options);
};
//监听国际化变化
watchSwitchLang(renderChart )
</script>

<style scoped>
.trend-chart-container {
  height: 100%;
}
</style>
